<template>
  <el-dialog :draggable=true :model-value="addDialogVisible" title="请输入用户信息" width="500" @close="handleClose">
    <template #footer>
      <div class="dialog-footer">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            class="demo-ruleForm"
            label-width="auto"
            status-icon
            style="max-width: 600px"
        >
          <el-form-item label="用户名">
            <el-input v-model="ruleForm.username" placeholder="请输入用户名 (20字符以内)"/>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="ruleForm.nickname" placeholder="请输入昵称 (10字符以内)"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="ruleForm.password" placeholder="请输入密码 (8-20字符)" type="password"/>
          </el-form-item>
          <el-form-item label="用户角色">
            <el-select
                v-model="ruleForm.roleId"
                placeholder="选择角色"
                size="large"
            >
              <el-option
                  v-for="item in roleMap"
                  :key="item.id"
                  :label="item.roleName"
                  :value="Number(item.id)"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              确认
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import {reactive, ref, defineProps, withDefaults, defineEmits} from 'vue'
import type {FormInstance} from 'element-plus'
import {addServer} from '@/api/webShell/ServerList'
import {addSysUser} from "@/api/system/sysUser";
import {ElMessage} from "element-plus";
import {getAllRoleList} from "@/api/system/sysRole";
import {message} from "@/utils/ElmessasgeUtils";

const emit = defineEmits(['update:addDialogVisible', "close"])

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  password: '',
  nickname: '',
  username: '',
  roleId: null,
})

const roleMap = ref()
getAllRoleList().then((res: any) => {
  if (res.data.code == 200) {
    roleMap.value = res.data.data
  } else {
    message("获取角色列表失败")
  }

})

const props = withDefaults(
    defineProps<{
      addDialogVisible: boolean
    }>(),
    {
      addDialogVisible: false
    })

function handleClose() {
  emit('update:dialogVisible', false)
  emit("close")
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log(ruleForm)
      addSysUser(ruleForm).then(res => {
        console.log(res)

        if (res.data.code !== 200) {
          ElMessage.error(res.data.msg);
        } else {
          emit('update:addDialogVisible', false)
          emit("close")
        }


      })
    } else {
      console.log('error submit!')
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>